<template>
	<div class="index">

		<!-- 头部轮播 -->
		<div class="banner-box">
			<swiper :options="swiperOption" ref="mySwiper">
				<!-- slides -->
				<swiper-slide v-for="(item,index) of bannerList" :key="index">
					<a :href="item.url">
						<img class="banner-pic" :src="item.picUrl" :alt="item.name">
					</a>					
				</swiper-slide>
				<!-- Optional controls -->
				<div class="swiper-pagination"  slot="pagination"></div>
			</swiper>
		</div>

		<!-- 导航部分 -->
		<div class="nav-box">
			<ul>
				<li class="nav-item" v-for="item of navList" :key="item.id">
					<a>
						<p class="nav-ico"><img :src="item.iconUrl" :alt="item.name"></p>
						<p class="nav-name">{{item.name}}</p>
					</a>
				</li>
			</ul>
		</div>

		<!-- 新闻部分 -->
		<div class="news-box">
			<div class="news-title">
				<h3>妍莱快报</h3>
			</div>
			<div class="news-infos">

			</div>
			<div class="news-more">
				<span>更多</span>
			</div>
		</div>

		<!-- 会员日活动 -->
		<floor-list :listId="55"></floor-list>
		<!-- 面部护理 -->
		<floor-list :listId="19"></floor-list>

	</div>	
</template>


<script>

import API from '@/api/api';
import FloorList from '@/components/floorList/FloorList'

export default {
	name: 'Index',
	data() {
		return {
			swiperOption: {
				autoplay: {
					stopOnLastSlide: false
				},
				pagination: {
					el: '.swiper-pagination'
				}
			},
			bannerList: [],
			navList: []
		}
	},
	components: {
		FloorList
	},
	computed: {
		
	},
	created() {
		this.getBanner();
		this.getNav();
	},
	mounted() {

	},
	methods: {
		// 获取首页轮播数据
		getBanner() {
			API.getIndexBanner()
				.then((res) => {
					// console.log(res);
					let bannerList = res.data.data;
					this.bannerList = bannerList; 					
				})
				.catch((error) => {
					console.log(error)
				})
		},
		// 获取首页导航数据
		getNav() {
			API.getIndexNav()
				.then((res) => {
					console.log(res);
					let navList = res.data.data;
					this.navList = navList; 				
				})
				.catch((error) => {
					console.log(error)
				})
		},
		// 获取首页分类数据
		getCat() {
			API.getIndexCat()
				.then((res) => {
					// console.log(res);
					let navList = res.data.data;
					this.navList = navList; 				
				})
				.catch((error) => {
					console.log(error)
				})
		}

	}

}	

</script>

<style lang="less" scoped>
@color-1: #f5f5f5;
@color-2: #686868;
.index{
	overflow: hidden;
	// 顶部轮播
	.banner-box{
		overflow: hidden;
		.banner-pic{
			display: block;
			width: 100%;
		}
	}
	// 导航菜单
	.nav-box{
		overflow: hidden;
		position: relative;
		margin: -.2rem .2rem 0;
		padding-top: .2rem;
		background-color: #ffffff;
		border-top-left-radius: .1rem;
		border-top-right-radius: .1rem;
		z-index: 1;
		ul{
			overflow: hidden;
		}
		.nav-item{
			overflow: hidden;
			float: left;
			width: 20%; 
			padding-bottom: .2rem;
			a{
				display: block;
				width: 100%;
				height: 100%;
			}
		}
		.nav-ico{
			overflow: hidden;
			img{
				display: block;
				width: 70%;
				margin: 0 auto;
			}
		}
		.nav-name{
			padding-top: .1rem;
			font-size: .24rem;
			text-align: center;
		}	

	}

	// 新闻部分
	.news-box{
		overflow: hidden;
		clear: both;
		display: flex;
		height: .6rem;
		line-height: .6rem;
		margin: .06rem .2rem 0;
		background-color: #ffffff;
		border-bottom-left-radius: .1rem;
		border-bottom-right-radius: .1rem;
		font-size: .24rem;
		.news-title{
			width: 2rem;
			padding-left: .2rem;
		}
		.news-infos{
			overflow: hidden;
			flex: 1;
		}
		.news-more{
			width: .8rem;
			padding-right: .2rem;
			text-align: right;
		}
	}
}	
</style>
